<!-- 地图画线等操作 -->
<template>
  <div id="map-geom-main" >
<!--    <Button type="primary" Title="地图工具" icon="md-crop" style="margin-top: 2px" @click="menuClick(2)"></Button>-->
   <div>
     <Button  v-for="(item,index) in geoms" :key="index"
              type="primary"
              :Title="item.title"
              :icon="item.icon"
              :style="{marginTop:'2px',marginLeft: '5px'}"
              @click="bttonClick(item.name)"
     />
   </div>
    <div>
      <Button  v-for="(item,index) in geoms1" :key="index"
               type="primary"
               :Title="item.title"
               :icon="item.icon"
               :style="{marginTop:'2px',marginLeft: '5px'}"
               @click="bttonClick(item.name)"
      />
    </div>

  </div>
</template>
<script>
export default {
  name:"MapGeomTools",
  data(){
    return{
      geoms:[
        {name:"Circle",title:this.$t('circle'),icon:"ios-radio-button-off"},
        {name:"Box",title:this.$t('rectangle'),icon:"ios-tablet-landscape"},
        {name:"Square",title:this.$t('square'),icon:"ios-square-outline"},
        {name:"Star",title:this.$t('stellate'),icon:"md-star-outline"},
        {name:"Polygon",title:this.$t('polygon'),icon:"logo-nodejs"},
      ],
      geoms1:[
        {name:"Line",title:this.$t('map_tool_straight_line'),icon:"ios-menu"},
        {name:"Distance",title:this.$t('map_tool_ranging'),icon:"ios-bicycle"},
        {name:"Zoomin",title:this.$t('map_tool_zoom_in'),icon:"ios-add-circle-outline"},
        {name:"Zoomout",title:this.$t('map_tool_zoom_out'),icon:"ios-remove-circle-outline"},
        {name:"Clear",title:this.$t('map_tool_clear'),icon:"ios-close"},
      ]
    }
  },
  methods:{
    menuClick(menuName){
      this.$emit('map-geom-tool-click', menuName)
    },
    bttonClick(menuName){
      //console.log(">>>>>>>> MapGeomTools.bttonClick name=%o",menuName);
      this.$emit('map-geom-tool-click', menuName)
    }
  }
}
</script>
<style lang="less">
@import "MapGeomTools-bright";
#map-geom-main{
  width: 200px;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  .panel{

  }
}

</style>

<style lang="less">



/*.ivu-poptip-inner
background-color*/

/*.ivu-select-dropdown {
  background-color: #001529;*/
</style>
